Robust design system for brand websites, end user and in-store Android/iOS apps across SAARC & Middle East for a market leading Indian paint manufacturer.
Asian Paints though having a strong brand language across their physical product range, lacks a consistent visual pattern in their online and “phygital” experience platform. With the company making a major shift from being just a paints brand to a complete home decor solution provider, from kitchen & bath appliances, fixtures, furnishings, lights and many more under their ‘Beautiful Homes’ umbrella, it becomes essential that a solid brand identity be present across the multiple sub brands.
More importantly, a design system will speed up and standardise implementation and maintenance of their growing and vast collection of digital assets: Asian Paints, Beautiful Homes, White Teak websites and apps.
I partnered with the team throughout the process, had regular check-ins, to iterate quickly and ensure we accounted for all the use cases and ensure the design system had high adaptability. It was a fast moving team & we stayed tightly aligned from design to delivery.
Primary, Neutral, secondary, tertiary and status colour palettes.
Colours are a key part of the design system. To define colours, we have the following principles:
Widely used in design.
The number of colours should be as small as possible.
The colour in Fluid DS has two parts, the colour in the Themes variable and the colour styles. Their difference is: when switching between light and dark mode, the colour in the Themes variable will change, but the colour in the colour styles will remain unchanged.
An 8 point Grid System was adhered to for maintaining consistency and relevancy. Just like our colour scale, working from a defined spacing system allows us to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options.
Simple like icons with rounded edges were selected to keep designs minimal and clutter free. We selected two styles: Simple line icons and line icons with a circular boundary, to better suit the usage scenario.
This was the backbone of our Design System.
It was a busy floor in the digital section of the Sales and Marketing floor. Imagine this:
Nonstop flow of business requirements.
UX team is making wireframes and prototypes to get approval on the flows.
We need to setup our design system from scratch so that it can be used for hi-fi designs.
Regular feedback on the design system in sync with ongoing visual design upgrades.
File size became monstrous and man-hours keep increasing as the design system grows.
Our approach to components were not the most optimal. Thus, the work load kept increasing.
For example, the buttons had 144 instances. It would be hectic to maintain them separately.
It introduced ease in building these components as well as made implementation simpler and flexible by:
Below is a mini example of input component that was made using above mentioned approach.
Documentation covered structure, spacing, properties, usage guidelines, do’s/dont’s & more for every components and foundation topics.
Button Large Primary Default
